<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <span class="name">{{user.UserName}}</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item @click="showModal">
        <a-icon type="setting" />
        <span>修改密码</span>
        
        <a-modal :visible="visible" title="密码设置" @ok="handleOk" @cancel="handleCancel" width="800px">
            <a-form :form="form">
              <a-row>
                <a-col>
                  <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="原始密码">
                      <a-input v-model="password" type="password"  />
                  </a-form-item>
                </a-col>
                <a-col>
                  <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="新密码">
                      <a-input v-model="newPassword" type="password"  />
                  </a-form-item>
                </a-col>
                <a-col>
                  <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="再次输入密码">
                      <a-input v-model="againNewPassword" type="password" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
        </a-modal>
      </a-menu-item>
      <a-menu-item v-show="false">
        <a-icon type="setting" />
        <span>设置</span>
      </a-menu-item>
      <!-- <a-menu-divider /> -->
      <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px;" type="poweroff" />
        <span>退出登录</span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import {mapGetters} from 'vuex'
import {logout} from '@/services/user'
import { userService } from '/src/services'

export default {
  name: 'HeaderAvatar',  
  data() {
    return {
      password:'',
      newPassword:'',
      againNewPassword:'',
      visible: false,
      layout: {
          labelCol: { span: 6 },
          wrapperCol: { span: 16 }
      },
      form: this.$form.createForm(this),
    }
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    logout() {
      logout()
      this.$router.push('/login')
    },    
    showModal() {
        this.visible = true
        this.password = ''
        this.newPassword = ''
        this.againNewPassword = ''
    },
    async handleOk() {
      if(!this.password) {        
        this.$message.error('请输入原始密码')
        return
      }
      if(!this.newPassword) {
        this.$message.error('请输入新密码')
        return
      }
      if(!this.againNewPassword) {
        this.$message.error('请再次输入密码')
        return
      }
      if(this.newPassword != this.againNewPassword){        
        this.$message.error('俩次密码输入不一致')
        return
      }
      var result = await userService.editPassword(this.password, this.newPassword)
      if(result && result.data) {        
          this.$message.success('保存成功')
          this.visible = false
      } else{
          this.$message.error('原始密码不正确')
      }
    },
    handleCancel() {
        this.visible = false
    },
  }
}
</script>

<style lang="less">
  .header-avatar{
    display: inline-flex;
    .avatar, .name{
      align-self: center;
    }
    .avatar{
      margin-right: 8px;
    }
    .name{
      font-weight: 500;
    }
  }
  .avatar-menu{
    width: 150px;
  }

</style>
